<script setup>
import { ref, computed, watchEffect } from "vue";
let todoList = ref([]);
// 监听来自父组件的事件和数据
const props = defineProps(["text"]);
// 维护id
let idCounter = 1;
const completeAll = ref(false);
const editing = ref(false);
const completeCount = computed(
  () => todoList.value.filter((todo) => todo.status).length
);
const allCount = computed(() => todoList.value.length);

// 监听todoList.value的变化
watchEffect(() => {
  if (props.text) {
    const todo = {
      id: idCounter++,
      text: props.text,
      status: false,
    };
    todoList.value.push(todo);
  }
});

// 切换所有待办事项的状态
const toggleAllTodos = () => {
  const newState = !completeAll.value; // 反转状态
  for (const todo of todoList.value) {
    todo.status = newState;
  }
};

// 删除待办事项
const deleteTodo = (id) => {
  const index = todoList.value.findIndex((todo) => todo.id === id);
  if (index !== -1) {
    todoList.value.splice(index, 1);
  }
};
// 删除所有待办事项
const deleteAllTodo = () => {
  todoList.value.splice(0, todoList.value.length);
};
// 删除所有已办事项
const deleteCompleteTodo = () => {
  for (let i = todoList.value.length - 1; i >= 0; i--) {
    if (todoList.value[i].status) {
      todoList.value.splice(i, 1);
    }
  }
};

// 点击 <span> 进入编辑模式
  const editItem = (item) => {
  editing.value = true;
};

// 失去焦点或按下回车键保存修改并退出编辑模式
const saveItem = (item) => {
  editing.value = false;
};
</script>

<template>
  <div>
    <ul class="list">
      <li v-if="todoList.length <= 0">暂无待办事项</li>
      <template v-for="item in todoList" :key="item.id">
        <li>
          <input type="checkbox" v-model="item.status" />
         <span
            v-if="!editing"
            @click="editItem(item)"
            :class="{ done: item.status }"
            >{{ item.text }}</span
          >
          <input
            v-else
            type="text"
            v-model="item.text"
            @blur="saveItem(item)"
          />

          <button class="delete" @click="deleteTodo(item.id)">删除</button>
        </li>
      </template>
      <li v-if="todoList.length > 0" class="footer">
        <input type="checkbox" v-model="completeAll" @click="toggleAllTodos" />
        <span>已办事项{{ completeCount }}/全部事项{{ allCount }}</span>
        <button class="delete01" @click="deleteCompleteTodo()">清除已办</button>
        <button class="delete" @click="deleteAllTodo()">清除所有</button>
      </li>
    </ul>
  </div>
</template>

<style scoped>
h1 {
  color: write;
}
ul {
  list-style-type: none;
}
.delete,
.delete01 {
  margin-left: 10px;
  padding: 5px 10px; /* 调整按钮的内边距 */
  cursor: pointer;
  background-color: #f44336; /* 设置按钮的背景颜色 */
  color: white; /* 设置按钮的文字颜色 */
  border: none;
  border-radius: 20px; /* 设置按钮的圆角 */
  border-width: 1px;
  border-color: aqua;
  
  
}
.delete01 {
  right: 100px;
}
.delete:hover {
  background-color: rgb(228, 228, 228);
}
.delete01:hover{
  background-color: rgb(228, 228, 228);
}
.list {
  border: 1px solid black;
  width: 80%;
  height: 80%;
  padding: 10px;
  position: fixed;
  top: 15%;
  left: 10%;
  overflow: auto; /* 或者使用 overflow: scroll; */
}
li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
}
li:hover {
  background-color: rgb(228, 228, 228);
}
li span {
  margin-left: 10px;
  flex-grow: 1; /* 让文字充满剩余空间 */
}
li input {
  margin-right: 10px;
}
.list li:hover {
  background-color: #99CCFF;
  border-radius: 0px 20px 20px 0px; 

}
.done {
  text-decoration: line-through;
  color: red;
}

.footer {
  background-color: #f9f9f9; /* 设置底部容器的背景颜色 */
}
</style>
